


My Workskin

by cmyatt01



Category: No Fandom
Genre: "Paper" backgrounds, CSS, Gen, HTML, How to Change AO3 fonts, How to Change Font Color, My AO3 workskin, Texting Workskin, iOS texing, sticky notes
Language: English
Status: In-Progress
Published: 2021-02-20
Updated: 2021-02-20
Packaged: 2021-03-11 23:07:17
Rating: General Audiences
Warnings: Creator Chose Not To Use Archive Warnings
Chapters: 2
Words: 3,191
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/28875417
Author URL: https://archiveofourown.org/users/cmyatt01/pseuds/cmyatt01
Summary: This is not a story - it is where I am messing around with HTML and CSS.Most of this was taken from AO3's Basic Workskin andAO3 Work Skins/Tutorials***UPDATED 2/20/2021 with improved Text formattingFeel Free to use or ignore
Comments: 7
Kudos: 5





	1. What it Looks Like

**Summary for the Chapter:**

> Examples of What it looks like.
> 
> At the bottom is what you have to put into the HTML section of AO3

## Fonts <h2>Fonts</h2>

p class = "indent" <p class="indent">p class = "indent"</p>

span class="caps" (small caps) <p><span class="caps"> span class="caps" (small caps) </span></p>

span class = font big <p><span class="font-big"> span class = font big </span></p>

span class = font small <p><span class="font-small"> span class = font small </span></p>

span class = font red <p><span class="font-red"> span class = font red </span></p>

span class = font purple <p><span class="font-purple"> span class = font purple </span></p>

span class = font teal <p><span class="font-teal"> span class = font teal </span></p>

span class = font redbrown <p><span class="font-redbrown"> span class = font redbrown </span></p>

span class = font brickred <p><span class="font-brickred"> span class = font brickred </span></p>

span class = font cherryred <p><span class="font-cherryred"> span class = font cherryred </span></p>

span class = font dimorange <p><span class="font-dimorange"> span class = font dimorange </span></p>

span class = font dimgreen <p><span class="font-dimgreen"> span class = font dimgreen </span></p>

span class = font leafgreen <p><span class="font-leafgreen"> span class = font leafgreen </span></p>

span class = font darkolive <p><span class="font-darkolive"> span class = font darkolive </span></p>

span class = font dimblue <p><span class="font-dimblue"> span class = font dimblue </span></p>

span class = font darknavy <p><span class="font-darknavy"> span class = font darknavy </span></p>

span class = font midviolet<p><span class="font-midviolet"> span class = font midviolet </span></p>

span class = font verydarkpurple <p><span class="font-verydarkpurple"> span class = font verydarkpurple </span></p>

span class = font darkplum <p><span class="font-darkplum"> span class = font darkplum </span></p>

span class = font reallydarkgray <p><span class="font-reallydarkgray"> span class = font reallydarkgray </span></p>

SANS: Test - One, Two, Three - font-family: Comic Sans MS, Chalkboard SE, sans-serif <p><span class="font-sans"> SANS: Test - One, Two, Three - font-family: Comic Sans MS, Chalkboard SE, sans-serif</span></p>

SERIF: Test - One, Two, Three font-family: Georgia, serif font-size: 120%; <p><span class="font-serif"> SERIF: Test - One, Two, Three font-family: Georgia, serif font-size: 120%; </span></p>

SERIF2: Test - One, Two, Three font-family: Courier New, Courier, serif font-size: 120%;<p><span class="font-serif2"> SERIF2: Test - One, Two, Three font-family: Courier New, Courier, serif font-size: 120%; </span></p>

SERIF3: Test - One, Two, Three font-family: Palatino, Palatino Linotype, serif font-size: 120% <p><span class="font-serif3"> SERIF3: Test - One, Two, Three font-family: Palatino, Palatino Linotype, serif font-size: 120% </span></p>

SERIF4 - One, Two, Three font-family: Garamond, EB Garamond, Didot, serif font-size: 120%;<p><span class="font-serif4"> SERIF4 - One, Two, Three font-family: Garamond, EB Garamond, Didot, serif font-size: 120%; </span></p>

MONOSPACE: Test - One, Two, Three font-family: consolas, courier, Monaco, Lucida Console, monospace; <p><span class="font-monospace"> MONOSPACE: Test - One, Two, Three font-family: consolas, courier, Monaco, Lucida Console, monospace</span></p>

MONOSPACE 2: Test - Once, Two, Three font-family: Bahnschrift, Menlo, monospace; <p><span class="font-monospace2">MONOSPACE 2: Test - Once, Two, Three font-family: Bahnschrift, Menlo, monospace; </span></p>

TYPE: Test - One, Two, Three font-family: American Typewriter, Century Schoolbook, monospace; <p><span class="font-type">TYPE: Test - One, Two, Three font-family: American Typewriter, Century Schoolbook, monospace</span></p>  


TYPE2: Test - One, Two, Three font-family: Rockwell, monospace; <p><span class="font-type2">TYPE2: Test - One, Two, Three font-family: Rockwell, monospace</span></p>

HAND: Test - One, Two, Three font-family: Kristen ITC, Chalkduster, Schoolbell, Papyrus, sans-serif; <p><span class="font-hand"> HAND: Test - One, Two, Three font-family: Kristen ITC, Chalkduster, Schoolbell, Papyrus, sans-serif;</span></p>

HAND2: Test - One, Two, Three font-family: Bradley Hand ITC, Bradley Hand, monospace; <p><span class="font-hand2">HAND2: Test - One, Two, Three font-family: Bradley Hand ITC, Bradley Hand, monospace;</span></p>  


HAND3: Test - One, Two, Three font-family: Monotype Corsiva, Hoefler Text, Papyrus, cursive; <p><span class="font-hand3">HAND3: Test - One, Two, Three font-family: Monotype Corsiva, Hoefler Text, Papyrus, cursive;</span></p>

HAND4: Test - One, Two, Three font-family: Papyrus, Perpetua, san-serif; <p><span class="font-hand4"> HAND4: Test - One, Two, Three font-family: Papyrus, Perpetua, san-serif; </span></p>

HAND5: Test - One, Two, Three font-family: Ink Free, Noteworthy, Papyrus, Perpetua, san-serif; <p><span class="font-hand5"> HAND5: Test - One, Two, Three font-family: Ink Free, Noteworthy, Papyrus, Perpetua, san-serif;</span></p>

HAND6: Test - One, Two, Three font-family: Chiller, Chalkduster, Dokdo, cursive; <p><span class="font-hand6"> HAND6: Test - One, Two, Three font-family: Chiller, Chalkduster, Dokdo, cursive;</span></p>

HAND7: Test - One, Two, Three font-family: Berlin Sans FB, Marker Felt, cursive; <p><span class="font-hand7"> HAND7: Test - One, Two, Three font-family: Berlin Sans FB, Marker Felt, cursive;</span></p>

FANTASY: Test - One, Two, Three font-family: Harrington, Palatino, Kohinoor Bangla, Grenze Gotisch, Party LET, Lucida Blackletter, Tangerine, Luminari, Trattatello, Goudy Old Style, Impact, fantasy; font-size: 130%; <p><span class="font-fantasy">FANTASY: Test - One, Two, Three font-family: Harrington, Palatino, Kohinoor Bangla, Grenze Gotisch, Party LET, Lucida Blackletter, Tangerine, Luminari, Trattatello, Goudy Old Style, Impact, fantasy; font-size: 130%;</span></p>

FANTASY2: Test - One, Two, Three font-family: Century Gothic, Futura; font-size: 130%; <p><span class="font-fantasy2"> FANTASY2: Test - One, Two, Three font-family: Century Gothic, Futura; font-size: 130%; </span></p>

FANTASY3: Test - One, Two, Three font-family Party LET, Curlz MT, Sansserif; font-size: 130%; <p><span class="font-fantasy3"> FANTASY3: Test - One, Two, Three font-family Party LET, Curlz MT, Sansserif; font-size: 130%; </span></p>

SCRIPT: Test - One, Two, Three - font-family: Freestyle Script, Savoye LET, monospace; <p><span class="font-script">SCRIPT: Test - One, Two, Three - font-family: Freestyle Script, Savoye LET, monospace </span></p>

SCRIPT2: Test - One, Two, Three font-family: Snell Roundhand, Segoe Script, cursive; font-size: 130%; <p><span class="font-script2">SCRIPT2: Test - One, Two, Three font-family: Snell Roundhand, Segoe Script, cursive; font-size: 130%; </span></p>

SCRIPT3: Test - One, Two, Three font-family: Vivaldi, Zapfino, cursive; font-size: 130%; <p><span class="font-script3">SCRIPT3: Test - One, Two, Three font-family: Vivaldi, Zapfino, cursive; font-size: 130%; </span></p>

SCRIPT4: Test - One, Two, Three font-family: Lucida Handwriting, Snell Roundhand, cursive; font-size: 130%; <p><span class="font-script4">SCRIPT4: Test - One, Two, Three font-family: Lucida Handwriting, Snell Roundhand, cursive; font-size: 130%; </span></p>

SCRIPT5: Test - One, Two, Three font-family: Brush Script MT, Brush Script Std, Savoye LET, Sacramento, Satisfy, serif; font-size: 130%; <p><span class="font-script5">SCRIPT5: Test - One, Two, Three font-family: Brush Script MT, Brush Script Std, Savoye LET, Sacramento, Satisfy, serif; font-size: 130%; </span></p>

OLD: Test - One, Two, Three font-family: Tempus Sans, Papyrus, cursive; <p><span class="font-old">OLD: Test - One, Two, Three font-family: Tempus Sans, Papyrus, cursive; </span></p>

OLD2: Test - One, Two, Three font-family: Optima, Perpetua, cursive; <p><span class="font-old2">OLD2: Test - One, Two, Three font-family: Optima, Perpetua, cursive; </span></p>

OLD3: Test - One, Two, Three font-family: Baskerville Old Face, Bodoni 72 Oldstyle, Baskerville, Old English Text MT, Century, serif; <p><span class="font-old3">OLD3: Test - One, Two, Three font-family: Baskerville Old Face, Bodoni 72 Oldstyle, Baskerville, Old English Text MT, Century, serif </span></p>

OLD4: Test - One, Two, Three font-family: Copperplate Gothic Light, Copperplate, monospace; <p><span class="font-old4">OLD4: Test - One, Two, Three font-family: Copperplate Gothic Light, Copperplate, monospace; </span></p>

OLD5: Test - One, Two, Three font-family: Academy Engraved LET, Colonna MT, monospace; <p><span class="font-old5">OLD5: Test - One, Two, Three font-family: Academy Engraved LET, Colonna MT, monospace; </span></p>

  
This looks like a sticky situation.

## Text Message Examples

NAME of PERSON   
  
**Yesterday** 10:15 PM  
Can you call me as soon as you get this message?  
**Read** 09:05 AM **Today** 9:05 AM  
Hello?  
Hey. Sorry. What's up?  
Can you call me?  
K. Give me a second.  
**Delivered**  
  
  


<div class="phone">

<p class="messagebody">

<span class="header">

<img class="back" src="https://cdn.discordapp.com/attachments/531153962234281985/812398271565660230/image0.jpg" /><img class="icon1" src="https://cdn.discordapp.com/attachments/531153962234281985/812320103587643402/image0.jpg" />NAME of PERSON<img class="info" src="https://cdn.discordapp.com/attachments/531153962234281985/812398283418107944/image0.jpg" />

</span><br />

<br />

<span class="time"><b>Yesterday</b> 10:15 PM</span><br />

<span class="text">Can you call me as soon as you get this message?</span><br />

<span class="readreceipt"><b>Read</b> 09:05 AM</span> <span class="time"><b>Today</b> 9:05 AM</span><br />

<span class="text">Hello?</span><br />

<span class="breply">Hey. Sorry. What's up?</span><br />

<span class="text">Can you call me?</span><br />

<span class="breply">K. Give me a second.</span><br />

<span class="readreceipt"><b>Delivered</b></span><br />

<img class="textbox" src="https://i.imgur.com/COueEHf.jpeg" /><br />

<br />

</p></div>

  
Name of Sender  
  
**Yesterday** 10:15 PM  
Can you call me as soon as you get this message?  
**Read** 09:05 AM **Today** 9:05 AM  
Hello?  
Hey. Sorry. What's up?  
Can you call me?  
K. Give me a second.  
**Delivered**  


<p></p>

<div class="phone">

<p class="messagebody"><span class="header2">

<img class="back" src="https://cdn.discordapp.com/attachments/531153962234281985/812398271565660230/image0.jpg" /><img class="icon" src="https://cdn.discordapp.com/attachments/531153962234281985/812320103587643402/image0.jpg" /><img class="info" src="https://cdn.discordapp.com/attachments/531153962234281985/812398283418107944/image0.jpg" /></span><br />

<span class="name">Name of Sender</span><br />

<br />

<span class="time"><b>Yesterday</b> 10:15 PM</span><br />

<span class="text">Can you call me as soon as you get this message?</span><br />

<span class="readreceipt"><b>Read</b> 09:05 AM</span> <span class="time"><b>Today</b> 9:05 AM</span><br />

<span class="text">Hello?</span><br />

<span class="breply">Hey. Sorry. What's up?</span><br />

<span class="text">Can you call me?</span><br />

<span class="breply">K. Give me a second.</span><br />

<span class="readreceipt"><b>Delivered</b></span><br />

<img class="textbox" src="https://i.imgur.com/COueEHf.jpeg" /></p></div>

  
Lyanna  
  
**Yesterday** 10:15 PM  
Can you call me as soon as you get this message?  
**Read** 09:05 AM **Today** 9:05 AM  
Hello?  
Hey. Sorry. What's up?  
Can you call me?  
K. Give me a second.  
**Delivered**  


  
Name of Sender  
  
**Yesterday** 10:15 PM  
Can you call me as soon as you get this message?  
**Read** 09:05 AM **Today** 9:05 AM  
Hello?  
Hey. Sorry. What's up?  
Can you call me?  
K. Give me a second.  
**Delivered**  


  
Name of Sender  
  
**Yesterday** 10:15 PM  
Can you call me as soon as you get this message?  
**Read** 09:05 AM **Today** 9:05 AM  
Hello?  
Hey. Sorry. What's up?  
Can you call me?  
K. Give me a second.  
**Delivered**  


## Paper Styles

** Hello,  
Test. Div class = oldpaper. font-cursive. Bolded. font-teal  
Thanks**

<div class="oldpaper">  
<p><strong> <span class="font-cursive"><span class="font-teal"> Hello,<br />Test. Div class = oldpaper. font-cursive. Bolded. font-teal<br />Thanks</span></span></strong></p>  
</div>

Hello,  
Test. Div class = oldpaper2. font-hand5. font-brickred  
Thanks

<div class="oldpaper2">  
<p><span class="font-hand5"><span class="font-brickred">Hello,<br />Test. Div class = oldpaper2. font-hand5. font-brickred<br />Thanks</span> </span></p>  
</div>

Hello,  
Test. Div Class =“oldpaper3” font-hand2. font-dimorange  
Thanks

<div class="oldpaper3">  
<p><span class="font-hand2"><span class="font-dimorange"> Hello,<br />Test. Div Class =&ldquooldpaper3&rdquo font-hand2. font-dimorange<br />Thanks</span> </span></p>  
</div>

Hello,  
Test. Div class = “oldpaper4” font-type. font-redbrown.  
Thanks

<div class="oldpaper4">  
<p><span class="font-type"><span class="font-redbrown">Hello,<br />Test. Div class = &ldquooldpaper4&rdquo font-type. font-redbrown.<br />Thanks</span> </span></p>  
</div>

Hello,  
Test. Div class = “oldpaper5” font-fantasy. font-darknavy.  
Thanks

<div class="oldpaper5">  
<p><span class="font-fantasy"><span class="font-darknavy">Hello,<br />Test. Div class = &ldquooldpaper5&rdquo font-fantasy. font-darknavy.<br />Thanks</span> </span></p>  
</div>

** Hello,  
Test. Div class = “oldpaper6” font-script. font-darkolive. BOLDED  
Thanks**

<div class="oldpaper6">  
<p><strong> <span class="font-script"> <span class="font-darkolive">Hello,<br />Test. Div class = &ldquooldpaper6&rdquo font-script. font-darkolive. BOLDED<br />Thanks</span> </span> </strong></p>  
</div>

Hello,  
Test. Div class = pastelpaper. font-hand3. font-verydarkpurple.  
Thanks

<div class="pastelpaper">  
<p><span class="font-hand3"><span class="font-verydarkpurple">Hello,<br />Test. Div class = pastelpaper. font-hand3. font-verydarkpurple.<br />Thanks</span> </span></p>  
</div>

  
  
  
  
  
  



	2. Actual Workskin

**Summary for the Chapter:**

> You have to create a AO3 workskin to create this.
> 
> AO3 has a few public workskins that can be used. This is one that I have tweaked and added to. I am still learning an not an expert.

#  **My Workskin **
    
    
    #workskin .indent {
      padding: 0 5em 0 5em;
    }
    
    #workskin .caps {
      font-variant: small-caps;
    }
    
    #workskin .font-sans {
      font-family: Comic Sans MS, Chalkboard SE, sans-serif;
    }
    
    #workskin .font-serif {
      font-family: Georgia, serif;
      font-size: 120%;
    }
    
    #workskin .font-serif2 {
      font-family: Courier New, Courier, serif;
      font-size: 120%;
    }
    
    #workskin .font-serif3 {
      font-family: Palatino, Palatino Linotype, serif;
      font-size: 120%;
    }
    
    #workskin .font-serif4 {
      font-family: Garamond, EB Garamond, Didot, serif;
      font-size: 120%;
    }
    
    #workskin .font-monospace {
      font-family: consolas, courier, Monaco, Lucida Console,  monospace;
    }
    
    #workskin .font-monospace2 {
      font-family: Bahnschrift, Menlo, monospace;
    }
    
    #workskin .font-type {
      font-family: American Typewriter, Century Schoolbook, monospace;
    }
    
    #workskin .font-type2 {
      font-family: Rockwell, monospace;
    }
    
    #workskin .font-hand {
      font-family: Kristen ITC, Chalkduster, Schoolbell, Papyrus, sans-serif;
    }
    
    #workskin .font-hand2 {
      font-family: Bradley Hand ITC, Bradley Hand, monospace;
    }
    
    #workskin .font-hand3 {
      font-family: Monotype Corsiva, Hoefler Text, Papyrus, cursive;
    }
    
    #workskin .font-hand4 {
      font-family: Papyrus, Perpetua, san-serif;
    }
    
    #workskin .font-hand5 {
      font-family: Ink Free, Noteworthy, Papyrus, Perpetua, san-serif;
    }
    
    #workskin .font-hand6 {
      font-family: Chiller, Chalkduster, Dokdo, cursive;
    }
    
    #workskin .font-hand7 {
      font-family: Berlin Sans FB, Marker Felt, cursive;
    }
    
    #workskin .font-fantasy {
      font-family: Harrington, Palatino, Kohinoor Bangla, Grenze Gotisch, Party LET, Lucida Blackletter, Tangerine, Luminari, Trattatello, Goudy Old Style, Impact, fantasy;
      font-size: 130%;
    }
    
    #workskin .font-fantasy2 {
      font-family: Century Gothic, Futura;
      font-size: 130%;
    }
    
    #workskin .font-fantasy3 {
      font-family: Party LET, Curlz MT, Sansserif;
      font-size: 130%;
    }
    
    #workskin .font-script {
      font-family: Freestyle Script, Savoye LET, monospace;
      font-size: 130%;
    }
    
    #workskin .font-script2 {
      font-family: Snell Roundhand, Segoe Script, cursive;
      font-size: 130%;
    }
    
    #workskin .font-script3 {
      font-family: Vivaldi, Zapfino, cursive;
      font-size: 130%;
    }
    
    #workskin .font-script4 {
      font-family: Lucida Handwriting, Snell Roundhand, cursive;
      font-size: 130%;
    }
    
    #workskin .font-script5 {
      font-family: Brush Script MT, Brush Script Std, Savoye LET, Sacramento, Satisfy, serif;
      font-size: 130%;
    }
    
    #workskin .font-old {
      font-family: Tempus Sans, Papyrus, cursive;
    }
    
    #workskin .font-old2 {
      font-family: Optima, Perpetua, cursive;
    }
    
    #workskin .font-old3 {
      font-family: Baskerville, Baskerville Old Face, Algerian, Impact, Copperplate, Serif;
    }
    
    #workskin .font-old4 {
      font-family: Copperplate Gothic Light, Copperplate, monospace;
    }
    
    #workskin .font-old5 {
      font-family: Academy Engraved LET, Colonna MT, monospace;
    }
    
    #workskin .font-big {
      font-size: 130%;
    }
    
    #workskin .font-small {
      font-size: 80%;
    }
    
    #workskin .font-red {
      color: red;
    }
    
    #workskin .font-orange {
      color: orange;
    }
    
    #workskin .font-yellow {
      color: yellow;
    }
    
    #workskin .font-green {
      color: green;
    }
    
    #workskin .font-blue {
      color: blue;
    }
    
    #workskin .font-purple {
      color: purple;
    }
    
    #workskin .font-white {
      color: white;
    }
    
    #workskin .font-black {
      color: black;
    }
    
    #workskin .font-pink {
      color: pink;
    }
    
    #workskin .font-teal {
      color: #008282;
    }
    
    #workskin .font-redbrown {
      color: #a15000;
    }
    
    #workskin .font-cherryred {
      color: #e00707;
    }
    
    #workskin .font-brickred {
      color: #a10000;
    }
    
    #workskin .font-dimorange {
      color: #f2a400;
    }
    
    #workskin .font-murkyyellow {
      color: #a1a100;
    }
    
    #workskin .font-jade {
      color: #4ac925;
    }
    
    #workskin .font-dimgreen {
      color: #008141;
    }
    
    #workskin .font-leafgreen {
      color: #1f9400;
    }
    
    #workskin .font-darkolive {
      color: #416600;
    }
    
    #workskin .font-dimblue {
      color: #005682;
    }
    
    #workskin .font-midblue {
      color: #0715cd;
    }
    
    #workskin .font-mediumskyblue {
      color: #00d5f2;
    }
    
    #workskin .font-darknavy {
      color: #000056;
    }
    
    #workskin .font-lightpurple {
      color: #f141ef;
    }
    
    #workskin .font-midviolet {
      color: #b536da;
    }
    
    #workskin .font-verydarkpurple {
      color: #2b0057;
    }
    
    #workskin .font-darkplum {
      color: #6a006a;
    }
    
    #workskin .font-darkmaroon {
      color: #77003c;
    }
    
    #workskin .font-reallydarkgray {
      color: #626262;
    }
    
    #workskin .phone {
      max-width: 300px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      display: table;
      margin: auto;
    }
    
    #workskin .header {
      min-width: 300px;
      background-color: #f6f6f6;
      border-bottom: 1px solid #b2b2b2;
      color: #000000;
      font-weight: bold;
      padding-bottom: .5em;
      padding-top: .5em;
      margin-left: -.5em;
      margin-right: -.5em;
      margin-bottom: -2em;
      text-align: center;
      text-transform: capitalize;
      display: table;
    }
    
    #workskin .header2 {
      min-width: 300px;
      background-color: #f6f6f6;
      color: #000000;
      font-weight: bold;
      padding-bottom: .5em;
      padding-top: .5em;
      margin-left: -.5em;
      margin-right: -.5em;
      margin-bottom: -2em;
      text-align: center;
      display: table;
    }
    
    #workskin .name {
      min-width: 300px;
      background-color: #f6f6f6;
      border-bottom: 1px solid #b2b2b2;
      color: #000000;
      font-size: .9em;
      font-weight: bold;
      padding-bottom: .3em;
      padding-top: .2em;
      margin-left: -.5em;
      margin-right: -.5em;
      margin-bottom: -.3em;
      text-align: center;
      display: table;
    }
    
    #workskin .icon {
      width: 40px;
      height: auto;
      float: center;
      margin: -0.1em -0.7em -0.1em 0em;
      border-radius: 50%;
    }
    
    #workskin .messagebody {
      background-color: #FFFFFF;
      display: table;
      padding-left: .5em;
      padding-right: .5em;
    }
    
    #workskin .text {
      float: left;
      color: #000000;
      margin: 0 0 0.5em;
      border-radius: 1em;
      padding: 0.5em 1em;
      background: #e5e5ea;
      max-width: 75%;
      clear: both;
      position: relative;
    }
    
    #workskin .text::after {
      content: "";
      position: absolute;
      left: -.5em;
      bottom: 0;
      width: 0.5em;
      height: 1em;
      border-right: 0.5em solid #e5e5ea;
      border-bottom-right-radius: 1em 0.5em;
    }
    
    #workskin .breply {
      float: right;
      color: #FFFFFF;
      margin: 0 0 0.5em;
      border-radius: 1em;
      padding: 0.5em 1em;
      background: #1289fe;
      max-width: 75%;
      clear: both;
      position: relative;
    }
    
    #workskin .breply::after {
      content: "";
      position: absolute;
      right: -0.5em;
      bottom: 0;
      width: 0.5em;
      height: 1em;
      border-left: 0.5em solid #1289fe;
      border-bottom-left-radius: 1em 0.5em;
    }
    
    #workskin .imagesend {
      float: right;
      margin: 0 0 0.5em;
      border-radius: 1em;
      width: 50%;
      min-height: 75%;
      clear: both;
      position: relative;
      background-image: url;
      background-repeat: no-repeat;
      background-size: 100%;
      display: inline-block;
      padding-top: 50%;
    }
    
    #workskin .imagerec {
      float: left;
      margin: 0 0 0.5em;
      border-radius: 1em;
      width: 50%;
      min-height: 75%;
      clear: both;
      position: relative;
      background-image: url;
      background-repeat: no-repeat;
      background-size: 100%;
      display: inline-block;
      padding-top: 50%;
    }
    
    #workskin .time {
      min-width: 295px;
      color: #7B7C80;
      font-size: .75em;
      padding-bottom: .5em;
      padding-top: .5em;
      margin-left: -.5em;
      margin-right: -.5em;
      margin-bottom: -.5em;
      text-align: center;
      display: table;
    }
    
    #workskin .readreceipt {
      color: #7B7C80;
      font-size: .75em;
      float: right;
      position: relative;
      clear: both;
      margin: -.75em -1.25em 0.5em 0;
      padding: 0 1em 0.5em;
    }
    
    #workskin .grouptext {
      color: #7B7C80;
      font-size: .75em;
      padding-bottom: .5em;
      padding-top: 0;
      margin-left: .5em;
      margin-bottom: -2.5em;
      text-align: left;
      display: table;
      clear: both;
    }
    
    #workskin .greply {
      float: right;
      color: #FFFFFF;
      margin: 0 0 0.5em;
      border-radius: 1em;
      padding: 0.5em 1em;
      background: #35cb24;
      max-width: 75%;
      clear: both;
      position: relative;
    }
    
    #workskin .greply::after {
      content: "";
      position: absolute;
      right: -0.5em;
      bottom: 0;
      width: 0.5em;
      height: 1em;
      border-left: 0.5em solid #35cb24;
      border-bottom-left-radius: 1em 0.5em;
    }
    
    #workskin .info {
      width: auto;
      height: 25px;
      float: right;
      margin: -0.1em 0.4em -0.3em -0.5em;
    }
    
    #workskin .icon1 {
      width: 35px;
      height: auto;
      float: left;
      margin: -0.1em -0.7em -0.1em 0em;
      border-radius: 50%;
    }
    
    #workskin .back {
      width: auto;
      height: 35px;
      float: left;
      margin: -0.2em 0.3em -0.2em .3em;
    }
    
    #workskin .textbox {
      width: 97%;
      float: left;
      margin: 0 0 0 .35em;
    }
    
    #workskin .oldpaper {
      background-image: url("https://i.imgur.com/hwYiYmn.jpg");
      color: #000;
      text-align: justify;
      padding: 15px;
      width: 80%;
      margin: 0 auto 25px;
      display: block;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }
    
    #workskin .oldpaper2 {
      background-image: url("https://png.pngtree.com/thumb_back/fw800/background/20190223/ourmid/pngtree-pure-vintage-kraft-paper-texture-background-paperretronostalgictexturetexturetexturematerialbackgroundsketchpad-image_84000.jpg");
      color: #000;
      text-align: justify;
      padding: 15px;
      width: 80%;
      margin: 0 auto 25px;
      display: block;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }
    
    #workskin .oldpaper3 {
      background-image: url("https://cdn.discordapp.com/attachments/531153962234281985/808488606892032040/image0.jpg");
      color: #000;
      text-align: justify;
      padding: 15px;
      width: 80%;
      margin: 0 auto 25px;
      display: block;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }
    
    #workskin .oldpaper4 {
      background-image: url("https://cdn.discordapp.com/attachments/531153962234281985/808496931974283274/image0.png");
      color: #000;
      text-align: justify;
      padding: 15px;
      width: 80%;
      margin: 0 auto 25px;
      display: block;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }
    
    #workskin .oldpaper5 {
      background-image: url("https://cdn.discordapp.com/attachments/531153962234281985/808494573072416768/image0.png");
      color: #000;
      text-align: justify;
      padding: 15px;
      width: 80%;
      margin: 0 auto 25px;
      display: block;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }
    
    #workskin .oldpaper6 {
      background-image: url("https://cdn.discordapp.com/attachments/531153962234281985/808513056308461608/image0.jpg");
      color: #000;
      text-align: justify;
      padding: 15px;
      width: 80%;
      margin: 0 auto 25px;
      display: block;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }
    
    #workskin .pastelpaper {
      background-image: url("https://i.pinimg.com/originals/5f/a7/87/5fa787d49ffebadb0541fe4f92af3458.jpg");
      color: #000;
      text-align: justify;
      padding: 15px;
      width: 80%;
      margin: 0 auto 25px;
      display: block;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }
    
    #workskin .sticky {
      display: BLOCK;
      background-color: #FFFF99;
      color: #000000;
      text-decoration: NONE;
      height: 15EM;
      width: 15EM;
      padding: 1EM;
      text-align: LEFT;
      margin-left: AUTO;
      margin-right: AUTO;
      -moz-box-shadow: 5PX 5PX 7PX RGBA(33,33,33,1);
      -webkit-box-shadow: 5PX 5PX 7PX RGBA(33,33,33,.7);
      box-shadow: 5PX 5PX 7PX RGBA(33,33,33,.7);
      -webkit-transform: ROTATE(-6DEG);
      -o-transform: ROTATE(-6DEG);
      -moz-transform: ROTATE(-6DEG);
      transform: ROTATE(-6DEG);
    }
    


End file.
